<template>
    <div class="bankadd_content">
      <jm-head ref="head"></jm-head>
        <div class="bankadd_info box">
            <div class="input_div box">
                <van-cell-group>
                  <van-field v-model="form.phone"
                    label="手机号"
                    type="tel"
                    placeholder="请输入手机号" />
                </van-cell-group>
                <van-cell-group>
                    <van-field
                      v-model="form.code"
                      center
                      clearable
                      label="验证码"
                      type="tel"
                      placeholder="请输入验证码"
                    >
                      <template #button>
                        <van-button @click="sendCode" size="small" type="primary" style="background: #d64532;border-color: #d64532;" :disabled="disabled" >{{text}}</van-button>
                      </template>
                    </van-field>
                </van-cell-group>
                <van-cell-group>
                  <van-field v-model="form.password"
                    label="密码"
                    type="password"
                    placeholder="请输入密码" />
                </van-cell-group>

                <van-cell-group>
                  <van-field v-model="form.conform_password" type="password" label="确认密码" placeholder="请再次输入密码" />
                </van-cell-group>

            </div>

            <div class="btns_div box">
                <button :class="readOnly == true ? 'div-onlyRead' : 'save_btn'" @click="onSave()" style="background-color: #d64532;">保存</button>
            </div>

        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
import { sendCode } from "@/api/user"
import { settingPassword } from "@/api/setting"
import JmHead from '../head/head'
import Vue from 'vue'
import { CellGroup,Field,Button } from 'vant';

Vue.use(CellGroup).use(Field).use(Button)
export default {
    name: 'bankcarAdd',
    components: {
        JmHead
    },
    data () {
        return {
            disabled: false,
            form:{
                storeId: 0,
                phone: '',
                code: '',
                password: '',
                conform_password: '',
                handlerType: 'reset'
            },
            text: '获取验证码',
            readOnly:false,//true禁止点击 false可以点击
        }
    },
    methods: {
        sendCode() {
            const toast = Toast.loading({
              duration: 0,
              message: '短信发送中...',
            });
            const obj = {
                storeId: this.form.storeId,
                phone: this.form.phone,
                handlerType: this.form.handlerType
            }
            sendCode(obj).then(res => {
                toast.clear()
                if (res.code === 20000) {
                    Toast.success({message: '发送成功', duration: 2000})
                    this.waitAgain()
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        waitAgain() {
            let code = 60
            const that = this
            const id = setInterval(function() {
                that.disabled = true
                that.text = `${--code}s后再试`
                if (code === 1) {
                    that.text = "获取验证码"
                    that.disabled = false
                    clearTimeout(id)
                }
            }, 1000)
        },
        onSave() {
            if (this.form.password !== this.form.conform_password) {
                Toast.fail({message: '两次密码不一致', duration: 2000})
                return
            }
            this.readOnly = true
            settingPassword(this.form).then(res => {
              this.readOnly = false
                if (res.code === 20000) {
                    Toast.success({message: '设置成功', duration: 2000})
                    this.$router.go(-1);
                    // this.$router.push({path: '/person'})
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
    },
    activated(){
      this.form.phone = ''
      this.form.code = ''
      this.form.password = ''
      this.form.conform_password = ''
      this.form.type = this.$route.query.type
      if(this.form.type === 'forget'){
        document.title = '忘记密码'
        this.form.storeId = this.$route.query.storeId
        this.form.handlerType = 'forget'
      }else{
        this.form.handlerType = 'reset'
        document.title = '设置密码'
        this.form.storeId = this.$store.state.userInfo.store_id
      }
      this.$refs.head.setNavBarUrl('',document.title)
    },
}
</script>

<style lang="stylus" scoped>
    .van-switch--on
        background-color red
    .bankadd_content
        width 100%
        height 100vh
        overflow hidden
        background #f5f5f5
        .bankadd_info
            width 100%
            overflow hidden
            .btns_div
                width 100%
                overflow hidden
                padding 0 .3rem
                button
                    width 100%
                    border 1px solid red
                    background red
                    line-height .9rem
                    height .9rem
                    font-size .30rem
                    color #fff
                    border-radius .9rem
                    display block
                    text-align center
                    margin-top .6rem
                .div-onlyRead
                	pointer-events none

</style>
